<!--使用案列：-->
<!--<breadCrumb :first="'aaa'" :second="'bbb'" :third="ccc"></breadCrumb>-->
<!--caraPath为每个菜单的路径，cataLength为菜单的个数-->
<template>
  <div class="breadCrumb">
    <i class="icon el-icon-arrow-left" @click="back"></i>
    <span v-for="item in cataList">
      <span v-if="item.data" :class="[item.cataLength === item.num  ? 'activeCrumb' : '', item.cataclass]" v-html="item.data" @click="crumbClick(item.cataPath[item.num-1], item.num)"></span>
      <span v-if="item.cataLength > item.num"> / </span>
    </span>
  </div>
</template>
<script>
  import {filterXSS} from '@/utils/m7Utils'
  export default {
    data () {
      return {
      }
    },
    props: {
      first: {
        type: String
      },
      second: {
        type: String
      },
      third: {
        type: String
      },
      forth: {
        type: String
      },
      fifth: {
        type: String
      },
      cataPath: {
        type: Array
      },
      cataLength: {
        type: Number
      }
    },
    computed: {
      cataList () {
        let cataclass = ['first', 'second', 'third', 'forth', 'fifth']
        let data = [this.first, this.second, this.third, this.forth, this.fifth]
        let length = 5
        let cataList = []
        for (let i = 0; i < length; i++) {
          cataList[i] = {
            num: i + 1,
            data: filterXSS(data[i]),
            cataPath: this.cataPath,
            cataLength: this.cataLength,
            cataclass: cataclass[i]
          }
        }
        return cataList
      }
    },
    methods: {
      crumbClick (path, num) {
        if (path === '1') {
          return
        }
        if (num === this.cataLength) {
          return
        }
        // 路径一样刷新当前页
        let type = path === this.$route.path ? 'cache' : 'init'
        this.$router.push(path)
        this.$store.commit('km/REFRESH_RIGHT', {type})
      },
      back () {
        let num = this.cataLength
        if (num === 1) {
          return
        } else {
          this.crumbClick(this.cataList[num - 2].cataPath[num - 2], num - 1)
        }
        this.$emit('pauseVideo') // 知识库编辑返回暂停富文本里的视频播放
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .breadCrumb
    line-height 30px
    padding 3px 10px
    border-bottom 1px solid $c-border1
    .icon
      color $c-main
      display inline-block
      width 18px
      height 18px
      line-height 18px
      border 1px solid $c-main
      border-radius 50%
      text-align center
    .el-icon-arrow-left
      font-size 12px
      cursor pointer
    .first,.second,.third,.forth,.fifth
      color $cf-gray4
      cursor pointer
    .first:hover,.second:hover,.third:hover,.forth:hover,.fifth:hover
      color $c-main
    .first
      margin-left 8px
    .activeCrumb,.activeCrumb:hover
      color $cf-gray1
      cursor default
</style>
